<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="js.js"></script>
</head>
<body>
<!--表单通过指定事件绑定函数
onsubmit：提交时触发，参数设置为"return f()"时，f()的返回值为true/false可以判断是否提交
-->
<form action="https://www.baidu.com" method="post" onsubmit="return md5()">
    <span>用户名：</span>
    <input type="text" name="username" id="username"><br>
    <span>密码：</span>
    <!--明文密码框不作为提交信息，也就是不赋值name属性-->
    <input type="password" id="password"><br>
    <!--给加密部分设置为hidden，并给name属性赋值用于提交-->
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">submit</button>
    <button type="reset">reset</button>
</form>
<script>
function md5(){
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var md5_password = document.getElementById('md5-password');

    //导入不了，假装加密一下吧
    // md5_password.value = md5(pwd.value);
    //hidden属性的密码框获得密码框里的value并加密
    md5_password.value = '***';//此时再提交，就是加密后的结果
    //拦截提交，全部成功才返回true，表单可以提交
    return true;
}
</script>
</body>
</html>